<template>
    <div>
        <div class="page-title">模块路径</div>
        <el-table :data="tableData" border style="width: 100%" class="m-t-20">
            <el-table-column prop="name" label="页面名称" width="250"></el-table-column>
            <el-table-column prop="url" label="页面路径" width="250"></el-table-column>
            <el-table-column label="操作">
                <template #default="v">
                    <el-button type="success" size="mini" icon="el-icon-document-copy" class="copy"
                        :data-clipboard-text="v.row.url" @click="copy">路径复制
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import Clipboard from 'clipboard'

    export default {
        name: 'Work',
        data() {
            return {
                tableData: [{
                    name: '社区介绍',
                    url: '/introduce'
                }, {
                    name: '两委分工',
                    url: '/office'
                }, {
                    name: '社区网格',
                    url: '/grid'
                }, {
                    name: '办事指南',
                    url: '/guide'
                }, {
                    name: '房屋租卖',
                    url: '/tenancy'
                }]
            }
        },
        methods: {
            // 复制
            copy() {
                let clipboard = new Clipboard('.copy')
                clipboard.on('success', () => {
                    this.$message.success({
                        message: '复制成功！',
                        offset: 70
                    })
                    clipboard.destroy()
                })
                clipboard.on('error', () => {
                    this.$message.info({
                        message: '该浏览器不支持自动复制！',
                        offset: 70
                    })
                    clipboard.destroy()
                })
            }
        },
    }
</script>

<style>
</style>